<!--
 * @Author: xuzehan h935351619@163.com
 * @Date: 2025-11-03 15:09:32
 * @LastEditors: xuzehan h935351619@163.com
 * @LastEditTime: 2025-11-04 12:01:09
 * @FilePath: \Hardware-Monitoring\src\views\TestCaseTemplate\TestCaseTempList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- 新增：文件选择按钮 -->
    <a-row style="margin-bottom: 12px">
      <a-col>
        <a-button type="primary" icon="folder-open" @click="selectYaml">
          选择本地 YAML 文件
        </a-button>
        <span v-if="fileName" style="margin-left: 8px; color: #666"> 已选：{{ fileName }} </span>
      </a-col>
    </a-row>
    <config-form :yaml-file-url="yamlFileUrl" form-title="RS422通信配置" @submit-success="handleSubmitSuccess" />
  </div>
</template>

<script>
import ConfigForm from './components/ConfigForm.vue'
export default {
  components: {
    ConfigForm
  },
  data() {
    return {
      // 假设你的YAML文件放在public/config目录下
      yamlFileUrl: '/config/T_rs422_config.yml', // 默认线上文件
      fileName: '' // 仅用于回显
    }
  },
  beforeDestroy() {
    // 清理内存
    if (this.yamlFileUrl.startsWith('blob:')) {
      URL.revokeObjectURL(this.yamlFileUrl)
    }
  },
  methods: {
    /* 弹出文件选择框 */
    selectYaml() {
      const input = document.createElement('input')
      input.type = 'file'
      input.accept = '.yml,.yaml'
      input.onchange = e => {
        const file = e.target.files[0]
        if (!file) return

        // 释放旧的临时 URL（如果存在）
        if (this.yamlFileUrl.startsWith('blob:')) {
          URL.revokeObjectURL(this.yamlFileUrl)
        }

        // 生成新的临时 URL 并更新
        this.yamlFileUrl = URL.createObjectURL(file)
        console.log(this.yamlFileUrl, '-----------lu')
        this.fileName = file.name
      }
      input.click()
    },
    handleSubmitSuccess(values) {
      console.log('配置提交成功:', values)
      // 这里可以处理提交成功后的逻辑，比如保存到服务器等
    }
  }
}
</script>

<style></style>
